<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<script type="text/javascript">
	$(document).ready(
			function() {
				var dir = window.location.protocol + '//'
						+ window.location.host + '/imagenes/'
						+ "<s:property value="#session.extintor.imagen"/>";
				document.getElementById("mapa").src = dir;
			});
	function selectValue(id, selectId) {
		var valor = document.getElementById(id);
		var select = document.getElementById(selectId);

		valor.value = select.options[select.selectedIndex].value;
	}
	function mostrarImagen() {
		$("#mapaImage").fadeIn(2000);
		$("#showImage").fadeOut();
		$("#outImage").fadeIn();
	}
	function ocultarImagen() {
		$("#mapaImage").fadeOut(2000);
		$("#outImage").fadeOut();
		$("#showImage").fadeIn();
	}
</script>
</head>
<body>
	<fieldset id="extintorData">
		<legend>Datos del Extintor</legend>
		<div style="margin-left: 35%; position: absolute;">
			<s:label value="Ultimo Mantenimiento:" />
			&nbsp;&nbsp;
			<s:if test="#session.extintor.alerta == true">
				<span class="alerta"> <s:property
						value="#session.extintor.ultimoMantenimiento" />
				</span>
			</s:if>
			<s:else>
				<span class="good"> <s:property
						value="#session.extintor.ultimoMantenimiento" />
				</span>
			</s:else>
			<br /> <br />
			<s:label value="Proximo Mantenimiento:" />
			&nbsp;&nbsp;
			<s:property value="#session.extintor.proximoMantenimiento" />
		</div>
		<s:label value="Modelo:" for="modelo" />
		&nbsp;&nbsp;
		<s:property value="#session.extintor.modelo.descripcion" />
		<br /> <br />
		<s:label value="Peso:" for="peso" />
		&nbsp;&nbsp;&nbsp;&nbsp;
		<s:property value="#session.extintor.peso.peso" />
		<br /> <br />
		<s:label value="Compuesto:" for="compuesto" />
		&nbsp;&nbsp;
		<s:property value="#session.extintor.compuesto.descripcion" />
		<br /> <br />
		<s:label value="Tipo Fuego:" for="fuego" />
		&nbsp;&nbsp;
		<s:iterator value="#session.extintor.tipofuegos">
			<s:if test="%{descripcion == 'tipoA'}">
				<img src="<s:url value="/resources/images/fuego/tipoA.png"/>" />&nbsp;
				</s:if>
			<s:if test="%{descripcion == 'tipoB'}">
				<img src="<s:url value="/resources/images/fuego/tipoB.png"/>" />&nbsp;
				</s:if>
			<s:if test="%{descripcion == 'tipoC'}">
				<img src="<s:url value="/resources/images/fuego/tipoC.png"/>" />&nbsp;
				</s:if>
			<s:if test="%{descripcion == 'tipoK'}">
				<img src="<s:url value="/resources/images/fuego/tipoK.png"/>" />&nbsp;
				</s:if>
		</s:iterator>
		<br /> <br />
		<s:label value="Tipo Ubicacion:" for="ubicacion" />
		&nbsp;&nbsp;
		<s:property value="#session.extintor.ubicacion.descripcion" />
		<br /> <br />
	</fieldset>
	<fieldset id="adminData">
		<legend>Datos Administrativos</legend>
		<s:label value="Ubicación Administrativa:" for="ubicAdmin" />
		&nbsp;&nbsp;
		<s:property value="#session.extintor.ubicacionAdministrativa.descripcion" />
		<br /> <br />
		<s:label value="Sede:" for="sede" />
		&nbsp;&nbsp;
		<s:property value="#session.extintor.sede.descripcion" />
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<s:label value="Area:" for="area" />
		&nbsp;&nbsp;
		<s:property value="#session.extintor.area" />
	</fieldset>
	<fieldset id="estadoExtintor">
		<legend>Estado del Extintor</legend>
		<table>
			<tr>
				<td><s:label value="Cilindro:" for="cilindro" /></td>
				<td><s:textfield id="cilindro" name="cilindro" /></td>
				<td><s:select id="listCilindro" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('cilindro','listCilindro')" /></td>
			</tr>
			<tr>
				<td><s:label value="Base del Extintor:" for="base" /></td>
				<td><s:textfield id="base" name="base" /></td>
				<td><s:select id="listBase" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('base','listBase')" /></td>
			</tr>
			<tr>
				<td><s:label value="Manija fija:" for="manija" /></td>
				<td><s:textfield id="manija" name="manija" /></td>
				<td><s:select id="listManija" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('manija','listManija')" /></td>
			</tr>
			<tr>
				<td><s:label value="Manómetro:" for="manometro" /></td>
				<td><s:textfield id="manometro" name="manometro" /></td>
				<td><s:select id="listManometro" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('manometro','listManometro')" /></td>
			</tr>
			<tr>
				<td><s:label value="Manija de activación:" for="manijaAct" />
				</td>
				<td><s:textfield id="manijaAct" name="manijaAct" /></td>
				<td><s:select id="listManijaAct" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('manijaAct','listManijaAct')" /></td>
			</tr>
			<tr>
				<td><s:label value="Pasador:" for="pasador" /></td>
				<td><s:textfield id="pasador" name="pasador" /></td>
				<td><s:select id="listPasador" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('pasador','listPasador')" /></td>
			</tr>
			<tr>
				<td><s:label value="Manguera y boquilla:" for="manguera" /></td>
				<td><s:textfield id="manguera" name="manguera" /></td>
				<td><s:select id="listManguera" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('manguera','listManguera')" /></td>
			</tr>
			<tr>
				<td><s:label value="Identificación del Extintor:"
						for="identificacion" /></td>
				<td><s:textfield id="identificacion" name="identificacion" />
				</td>
				<td><s:select id="listIdentificacion" name="estado"
						list="estados" listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('identificacion','listIdentificacion')" />
				</td>
			</tr>
			<tr>
				<td><s:label value="Etiqueta CNE:" for="etiqueta" /></td>
				<td><s:textfield id="etiqueta" name="etiqueta" /></td>
				<td><s:select id="listEtiqueta" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('etiqueta','listEtiqueta')" /></td>
			</tr>
			<tr>
				<td><s:label value="Ubicación física:" for="ubicacionf" /></td>
				<td><s:textfield id="ubicacionf" name="ubicacionf" /></td>
				<td><s:select id="listUbicacion" name="estado" list="estados"
						listKey="descripcion" headerKey="-1"
						headerValue="<--Seleccione-->" listValue="descripcion"
						onchange="selectValue('ubicacionf','listUbicacion')" /></td>
			</tr>
			<tr>
				<td><s:label value="Observaciones:" for="observacion" /></td>
				<td colspan="2"><s:textarea id="observacion"
						name="observacion" cssClass="datosGeneral" /></td>
			</tr>
			<tr>
				<td><s:label value="¿Requiere reparación?" for="reparacion" /></td>
				<td colspan="2"><s:checkbox id="reparacion" name="reparacion" /></td>
			</tr>
		</table>		
	</fieldset>
	<fieldset id="historial">
		<legend>Historial del Extintor</legend>
		<div align="center">
		<table style="width: 100%;">
			<thead>
				<tr>
					<th>Operacion</th>
					<th>Usuario</th>
					<th>Fecha</th>
				</tr>
			</thead>
			<s:iterator value="historial">
				<tr>
					<td align="center"><s:property value="operacion" /></td>
					<td align="center"><s:property value="responsable.nombres" />&nbsp;<s:property
							value="responsable.apellidos" /></td>
					<td align="center"><s:property value="fechaModificacion" /></td>
				</tr>
			</s:iterator>
		</table>
			<s:url id="generarPdf" action="generarReporteHistoricoExtintor"
				namespace="/reportes">
				<s:param name="tipoReporte">pdf</s:param>
			</s:url>
			<s:a cssClass="image" href="%{generarPdf}">
				<img src="<s:url value="/resources/images/pdf.png"/>" alt='Generar PDF' width='23px'
					height='23px' border="0px" title='Generar PDF'>
			</s:a>
			<s:url id="generarPdf2" action="generarReporteHistoricoExtintor"
				namespace="/reportes">
				<s:param name="tipoReporte">xls</s:param>
			</s:url>
			<s:a cssClass="image" href="%{generarPdf2}">
				<img src="<s:url value="/resources/images/excel.png"/>" alt='Generar Excel' width='23px'
					height='23px' border="0px" title='Generar Excel'>
			</s:a>
		</div>
	</fieldset>

	<fieldset id="imagen">
		<legend>
			Ubicacion en Mapa&nbsp;&nbsp;&nbsp;
			<sj:a id="showImage" onclick="mostrarImagen()">
				<img src="<s:url value="/resources/images/expand.png"/>" width="20;"
					height="20;" alt="Mostrar Imagen" />
			</sj:a>
			<sj:a  onclick="ocultarImagen()">
				<img id="outImage" src="<s:url value="/resources/images/collapse.png"/>" width="20;"
					height="20;" alt="Ocultar Imagen" style="display: none;" />
			</sj:a>
		</legend>
		<div id="mapaImage" style="display: none;">
			<s:label value="Ubicacion:" />
			&nbsp;&nbsp; <img id="mapa" alt="Mapa" width="" height="" />
		</div>
	</fieldset>
	<div align="center">
		<sj:a id="registrar" href="../extintor/inspect.action"
			formIds="estadoExtintor" indicator="indicator"
			targets="body" button="true" buttonIcon="ui-icon-gear">
								REGISTRAR
							</sj:a>
	</div>
</body>
</html>